<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input+span{
				color:red;
			}
			.ok{
				color: green;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				var eok=false,passok=false,repassok=false;
				$("input[name=em]").blur(function(){
					var v=$(this).val();
					if(v.indexOf("@")==-1||v.indexOf(".")==-1){
						eok=false;
						$(this).next().removeClass("ok").html("邮件格式不正确，必须有@和.");
						return false;
					}
					eok=true;
					$(this).next().html("√").addClass("ok");
				});
				$(":password[name=pass]").blur(function(){
					var p=$(this).val();
					if(p.length<6){
						passok=false;
						$(this).next().html("密码太短").removeClass("ok");
						return false;
					}
					passok=true;
					$(this).next().html("√").addClass("ok");
					
				});
				$(":password[name=repass]").blur(function(){
					var p=$(this).val();
					var p2=$(":password[name=pass]").val();
					if(p!=p2){
						repassok=false;
						$(this).next().html("两次密码输入不一致").removeClass("ok");
						return false;
					} 
					repassok=true;
					$(this).next().html("√").addClass("ok");
					
				});
				$("#regForm").submit(function(){
					$(":text").triggerHandler("blur");
					$(":password").triggerHandler("blur");
					return eok&&passok&&repassok;
				});
			});
		</script>
	</head>
	<body>
		<form action="222.html" method="get" id="regForm">
			<p>
				电子邮件:<input type="text" name="em"/><span></span>
			</p>
			<p>
				密码：<input type="password" name="pass" id="pass"/><span></span>
			</p>
			<p>
				确认密码：<input type="password" name="repass" id="repass"/><span></span>
			</p>
			<p align="center">
				<input type="submit" value="注册"/>
			</p>
		</form>
	</body>
</html>
